<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="../static/layui-v2.6.8/layui/css/layui.css">
    <script src="../static/layui-v2.6.8/layui/layui.js"></script>
    <style>
        body{
            background-image: url("/static/img/bg.png");
        }
        .parent {
            position: relative;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, 150%);
        }
        .st{
            color: white;
        }
        .wd{
            width: 300px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="layui-form child">
        <div class="layui-form-item">
            <label class="layui-form-label st">用户名</label>
            <div class="layui-input-block">
                <input  id="username" type="text" name="title" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input wd">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label st">密 &nbsp;&nbsp;&nbsp;码</label>
            <div class="layui-input-block">
                <input id="password" type="password" name="password" required lay-verify="required"
                       placeholder="请输入密码"
                       autocomplete="off" class="layui-input wd">
            </div>
<!--            <div class="layui-form-mid layui-word-aux">密码不能为空</div>-->
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" id="loginBtn">点击登录</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="resetBtn">重置</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(["jquery", "layer"], function () {
        let $ = layui.jquery,
            layer = layui.layer;

        function getParam() {
            let user_name = $("#username").val();
            let pass_word = $("#password").val();
            return {
                "username": user_name,
                "password": pass_word
            }
        }

        $("#resetBtn").click(function () {
            $("#username").val('');
            $("#password").val('');
        })

        $("#loginBtn").click(function () {
            let logParam = getParam();
            $.post("/login", logParam, function (res) {
                if (res.code === 200) {
                    layer.msg(res.msg, {icon: 6, time: 1000}, function () {
                        window.location.href = '/'
                    });
                }else{
                    layer.msg(res.msg, {icon: 2, time: 1000}, function () {
                        // window.location.href = '/'
                    });
                }
            })
        })
    })
</script>
</html>